
import React, { Component } from 'react';
import { PlusOutlined, InfoCircleOutlined, SmallDashOutlined, WifiOutlined, UsbOutlined, ScheduleOutlined } from '@ant-design/icons';
import { Select } from 'antd';
import './EmergencyManagementPage.less';

class EmergencyManagementPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            company: 'HSE SMART INC',
            floor: 'Device OTA',
            offices: [
                { name: 'Office 01', icon: 'file' },
                { name: 'Office 02', icon: 'lightbulb' },
                { name: 'Office 03', icon: 'user' },
                { name: 'Office 04', icon: 'file' },
                { name: 'Office 05', icon: 'lightbulb' },
                { name: 'Office 06', icon: 'user' }
            ]
        };
    }

    handleCompanyChange = (value) => {
        this.setState({ company: value });
    };

    handleFloorChange = (value) => {
        this.setState({ floor: value });
    };

    render() {
        return (
            <div className="device-management-container">
                {/* 1. Area Management 标题行 */}
                <div className="header-row">
                    <h2>Schedules</h2>
                    <InfoCircleOutlined className="action-icon" />
                </div>

                <div className="section2">
                    <div className="section2-header">
                        <ScheduleOutlined className="action-icon" />
                        <span>Create Scene</span>
                        <PlusOutlined className="action-icon" />
                    </div>
                </div>
                <div className="section3">
                    <h3>Scene-01</h3>
                    <h5>Time:10:00 AM UTC</h5>
                    <h5>Mon,Tues,Weds,Thurs,Fri</h5>
                    <h5>Qurst:Dim level50%</h5>
                    <h5>Repeat:Infinite cycle</h5>
                    <h5>Associated Group:office 1 ,office 02,</h5>
                    <h5>office 1 ,office 02,</h5>
                </div>
                <div className="section3">
                    <h3>Scene-02</h3>
                    <h5>Time:18:00 PM UTC</h5>
                    <h5>Mon,Tues,Weds,Thurs,Fri</h5>
                    <h5>Qurst:OFF</h5>
                    <h5>Repeat:Infinite cycle</h5>
                    <h5>Associated Group:Group 1,office 02,</h5>
                    <h5>Group 1, ,office 02,</h5>
                </div>
                <div className="section2">
                    <div className="section2-header">
                        {/* <span className={`office-icon ${office.icon}`} /> */}
                        <UsbOutlined className="arrow-icon" />
                        <span>Gateway Device</span>
                        <WifiOutlined className="arrow-icon" />
                        <SmallDashOutlined className="arrow-icon" />
                    </div>
                </div>

            </div>
        );
    }
}

export default EmergencyManagementPage;
